import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:untitled/pages/FlutterUI/info_screen.dart';

import 'constant.dart';

class MyHeader extends StatefulWidget {
  final String? image;
  final String? textTop;
  final String? textBottom;
  final double? offset;
  const MyHeader({Key? key, 
  this.image, 
  this.textTop, 
  this.textBottom, 
  this.offset}) : super(key: key);

  @override
  State<MyHeader> createState() => _MyHeaderState();
}

class _MyHeaderState extends State<MyHeader> {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyClipper(),
      child:Container(
        padding: EdgeInsets.only(left: 40,top: 50,right: 20),
        height: 350,
        width: double.infinity,
        decoration:BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Color(0xff3383cd),
              Color(0xff11249f),
            ],
          ),
          image: DecorationImage(
            image: AssetImage("assets/virus.png")
          )
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            GestureDetector(
              onTap: (){
                Navigator.push(context, 
                 MaterialPageRoute(builder: (context){
                  return InfoScreen();
                 })
                );
              },
              child: SvgPicture.asset("assets/icons/menu.svg"),
            ),
            SizedBox(height:20),
            Expanded(
              child: Stack(
                children: [
                  Positioned(
                    top: (widget.offset! < 0) ? 0 : widget.offset,
                    child: SvgPicture.asset(
                      widget.image as String,
                      width: 230,
                      fit: BoxFit.fitWidth,
                      alignment: Alignment.topCenter,
                    ),
                  ),
                  Positioned(
                    top: 20 - widget.offset! / 2,
                    left: 150,
                    child: Text(
                      "${widget.textTop} \n${widget.textBottom}",
                      style: kHeadingTextStyle.copyWith(
                        color: Colors.white,
                      ),
                    ),
                  ),
                  Container(),
                ],
              )
            )
          ],
        ),
      )


    );
    
  }
}

// 需加深 学习
class MyClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height - 80);
    path.quadraticBezierTo(size.width /2, size.height,size.width, size.height - 80);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }

}